<template>
	<view id="submitAuthTwo">
		<view class="submit-auth-title">
			<view class="title">
				请根据实际情况认证您的身份，填写虚假信息由您本人承担全部责任！
			</view>
		</view>
		<ul class="auth-wrap">
			<li class="norm-single-li auth-info">
				<h5>期(区)号</h5>
				<input type="text" v-model="district" placeholder="请输入期(区)号" />
			</li>
			<li class="norm-single-li auth-info">
				<h5>楼号</h5>
				<input type="text" v-model="floor" placeholder="请输入楼号" />
			</li>
			<li class="norm-single-li auth-info">
				<h5>单元号</h5>
				<input type="text" v-model="unit" placeholder="请输入单元号" />
			</li>
			<li class="norm-single-li auth-info">
				<h5>房间号</h5>
				<input type="text" v-model="room_code" placeholder="请输入房间号" />
			</li>
			<li class="norm-single-li auth-info">
				<h5>面积</h5>
				<input type="number" v-model="ruleForm.housing_area" placeholder="请输入面积" />
			</li>

			<view class="step">
				<view class="two">
					<h5>上传房本/购房合同</h5>
					<view class="img-upload">
						<view style="display: flex;">
							<view class="img-list" v-for="(item, index) in imgUrl" :key="index">
								<view style="display: flex;">
									<image class="process-img" :src="item"></image>
								</view>

								<image class="close" @click="cancelImg(item)" src="../../static/vote/close.png"></image>
							</view>
						</view>
						<view v-if="this.imgUrl.length != 9" class="img-up" @click="uploadImg"></view>
					</view>
				</view>
			</view>
			<li>
				<p class="seal">
					提示：购房合同需要上传带有甲乙双方页、地址页、面积页和签字盖章页
				</p>
			</li>
		</ul>
		<u-button class="bottom-btn" :custom-style="customStyle" @click="submitAuth">提交认证</u-button>

		<!-- 开始附议弹框 -->
		<view style="position: relative;">
			<view class="meeting-dialog">
				<u-popup v-model="isSencond" mode="center" border-radius="14">
					<view class="meeting-wrap">
						<view class="meeting-title">
							认证通过
						</view>
						<view class="meeting-start">
							<image class="img" src="../../static/vote/authSucc.png"></image>
						</view>
						<view class="meeting-cont succ">
							认证通过请及时关注小区动态！
						</view>
						<view class="meeting-btn" @click="next(id)">
							确定
						</view>
					</view>
				</u-popup>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			return {
				//保存信息
				ruleForm: {
					essential_information_id: null,
					user_id: '', //用户id
					user_id_zyw: null,
					full_name: '', //用户姓名
					telephone: '', //用户电话
					id_card_just: '', //身份证正面
					id_card_back: '', //身份证反面
					houseName: '', //小区名称
					housing_area: null, //面积
					building_number: null, //房间 期-楼-单元-门牌
					house_certificate: '', //房产证
					audit_status: 0
				},
				district: null, //期
				floor: null, //楼
				unit: null, //单元
				room_code: null, //门牌号
				imgUrl: [],



				imgFlag1: false,
				img1: '',
				isSencond: false, //认证未通过
				status: 1, //认证是否通过 1 通过 2 未通过
				customStyle: {
					marginTop: "100rpx", // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					background: 'linear-gradient(180deg, #76D904 0%, #417505 100%)',
					borderRadius: '44rpx',
					color: "#ffffff",
					width: "570rpx",
					heght: '88rpx'
				},

				//  当前房间信息
				address: null,
				area: null,
				storageObj: {},
				ownerInformation: {},

			}
		},
		onShow() {

		},
		onLoad(option) {
			this.ruleForm = JSON.parse(option.voteUserInfo)
		},
		methods: {
			//上传图片
			uploadImg() {
				if (this.imgUrl.length >= 9) {
					this.tui.toast('最多上传9张图片')
					return
				}
				let that = this
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success(res) {
						that.img = res.tempFilePaths || []
						for (let i = 0; i < that.img.length; i++) {
							//file转base64
							pathToBase64(that.img[i]).then(res => {
								that.$request.api.image({
									imageBase64: res
								}).then(data => {
									that.imgUrl.push(data.data.data)
									console.log(data.data.data)
								})
							})
						}


					}
				})
			},
			//取消图片
			cancelImg(val) {
				this.imgUrl.splice(this.imgUrl.indexOf(val), 1)
			},
			imageBig(url) {
				uni.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				})
			},
			//前端获取当前时间
			getDate() {
				var _this = this;
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				_this.nowDate = yy + "-" + mm + "-" + dd;
			},


			//增加用户认证信息  到这基本信息是71 主键
			//提交认证
			submitAuth() {
				if (!this.district) {
					uni.showToast({
						title: '请输入期号',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.floor) {
					uni.showToast({
						title: '请输入楼号',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.unit) {
					uni.showToast({
						title: '请输入单元号',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.room_code) {
					uni.showToast({
						title: '请输入门牌号',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.ruleForm.housing_area) {
					uni.showToast({
						title: '请输入面积',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				
				this.imgUrl.forEach((item, index) => {
					if (index > 0) {
						this.ruleForm.house_certificate += ',' + item; //item.url;
					} else {
						this.ruleForm.house_certificate = item; //item.url;
					}
				});
				if (!this.ruleForm.house_certificate) {
					uni.showToast({
						title: '请上传房本/购房合同',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.ruleForm.building_number = this.district + "-" + this.floor + "-" + this.unit + "-" + this.room_code
				this.$requestYz.api.addVoteUserInfo(this.ruleForm).then(res => {
					this.isSencond = true
				})
			},

			//voteIndex
			next(id) {
				this.isSencond = false
				uni.redirectTo({
					url: '/pages/vote/voteIndex?id=' + this.ruleForm.essential_information_id
				});

			},

			//关闭图片
			colseImg(status) {
				this.img1 = ''
				this.imgFlag1 = false;
			},
			// 选择图片
			uoloadHouse() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 9, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.img1 = res.data.data;
											_this.imgFlag1 = true;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album'],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.img1 = res.data.data;
											_this.imgFlag1 = true;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
		}
	}
</script>

<style lang="scss">
	$color: #333;

	#submitAuthTwo {
		.img-up {
			width: 126rpx;
			height: 126rpx;
			border-radius: 8rpx;
			border: 1rpx dashed #CCC;
			background: url(../../static/vote/upload_img_icon.png) center center no-repeat;
			background-size: 34rpx 34rpx;
		}

		.img-upload {
			padding-top: 32rpx;
			// display: flex;

			.img-list {
				width: 126rpx;
				height: 126rpx;
				margin-right: 28rpx;
				position: relative;

				.process-img {
					width: 126rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}

				.close {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					right: -10rpx;
					top: -10rpx;
				}
			}

		}

		.two {
			margin-top: 40rpx;
			font-size: 19px;
			background: #FFFFFF;
		}

		.process-img {
			width: 126rpx;
			height: 120rpx;
			border-radius: 8rpx;
		}

		.submit-auth-title {
			background: #F4F4F4;
			font-size: 26rpx;
			font-weight: bold;
			height: 116rpx;

			.title {
				padding: 26rpx 40rpx;
			}
		}

		.auth-wrap {
			margin: 20rpx 30rpx;
		}

		.auth-info {
			border-bottom: 1px solid #e3e3e3;

			h5 {
				font-size: 32rpx;
				color: $color;
				font-weight: bold;
			}

			p {
				color: $color;
				font-size: 32rpx;
				width: 418rpx;
				text-align: right;
				font-weight: bold;
			}

			.guarn-box {
				width: 100%;
				height: 216rpx;
			}

			.guarn-box-img {
				width: 216rpx;
				height: 216rpx;
				float: right;
				margin-right: 24rpx;
				text-align: center;
				border: 2rpx solid #ccc;
				border-radius: 4rpx;
			}

			.guarn-box-img image {
				width: 76rpx;
				height: 68rpx;
			}

			.guarn-box2-img {
				// width:216rpx;
				height: 216rpx;
				margin-right: 20rpx;
				position: relative;

				.guarn-box2-img-close {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}
			}
		}

		.seal {
			margin-top: 20rpx;
			color: #999;
			font-weight: bold;
			font-size: 26rpx;
		}

		/*弹框*/
		.meeting-dialog {
			position: relative;

			::v-deep .u-mode-center-box {
				width: 670rpx !important;
				height: 800rpx;
				background: #FFFFFF !important;
				border-radius: 12rpx !important;
			}

			.meeting-wrap {
				padding: 40rpx;
			}

			.meeting-title {
				font-size: 18px;
				font-weight: bold;
				padding-bottom: 20px;
				border-bottom: 1px solid #E7ECE1;
			}

			.meeting-start {
				margin: 40rpx 0 24rpx;
				font-size: 16px;
				font-weight: bold;

				.img {
					width: 160px;
					height: 114px;
					margin: 0 auto;
					transform: translate(74px, 8px);
				}
			}

			.meeting-cont {
				color: red;
				font-size: 32rpx;
				border-bottom: 60rpx;
				margin-top: 50rpx;
				margin-bottom: 120rpx;
				text-align: center;
			}

			.succ {
				color: #333300;
				font-weight: bold;
			}

			.meeting-btn {
				width: 350rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: #FFFFFF;
				border-radius: 22px;
				border: 1px solid #427705;
				text-align: center;
				color: #427705;
				margin: 40px auto;
				font-weight: bold;
			}
		}


	}
</style>
